<template>
  <view>
    <customtop top_title="签到中心"></customtop>
    <view class="qiandaopage" v-if="!loading">
      <view class="luck-container">
        <view class="ptop">
          <view class="bd">
            <view class="left">
              <view class="vm1">
                已连续签到
              </view>
              <view class="vm2">
                <span class="sp1">{{loginUser.qiandao_continuous_count}}</span>
                <span class="sp2">天</span>
              </view>
            </view>
            <view class="right">
              总金币：{{loginUser.gold}}
            </view>
          </view>
        </view>
        <view class="box1">
          <view class="msg">每天签到，获取海量金币</view>
          <view class="luckbtn luckbtn-default" @click="qiandao" v-if="qiandaoData.today == 0">立即签到</view>
          <view class="luckbtn luckbtn-secondary" v-if="qiandaoData.today == 1">今日已签到</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { request } from "@/utils/http.js"
import customtop from "@/components/customtop.vue"

export default {
  components: { customtop },

  data() {
    return {
      loading: true,
      loginUser: {},
      qiandaoData: {},
    }
  },

  onShow: function() {
    this.getLoginUser();
    this.getQiandaoData();
  },

  methods: {
    getLoginUser: function() {
      uni.showLoading();
      request.post('/user/getLoginUser').then(res => {
        uni.hideLoading();
        this.loading = false;
        this.loginUser = res.data;
      })
    },

    getQiandaoData: function() {
      request.post('/account/getQiandaoData').then(res => {
        this.qiandaoData = res.data;
      })
    },

    qiandao: function() {
      uni.showLoading();
      request.post('/account/qiandao').then(res => {
        uni.hideLoading();
        this.getLoginUser();
        this.getQiandaoData();
        uni.showModal({
          showCancel: false,
          confirmText: '我知道了',
          content: res.message
        })
      })
    },

    jumpPage: function(url) {
      uni.navigateTo({ url: url });
    }
  }
}
</script>

<style>
page {
  padding-bottom: 30rpx;
  background-color: #fff;
}
.ptop {
  margin-top: 30rpx;
  border-radius: 5px;
  background-color: #61e7ce;
  padding: 30px 30px 30px 30px;
}
.ptop .bd {
  display: flex;
  justify-content: space-between;
}
.ptop .bd .left {
  width: 60%;
}
.ptop .bd .left .sp1 {
  font-weight: 600;
  font-size: 22px;
  margin-right: 5px;
}
.ptop .bd .right {}
.box1 {
  margin-top: 30rpx;
}
.box1 .msg {
  font-size: 12px;
  text-align: center;
  margin-bottom: 8px;
  color: #999;
}
.box1 .luckbtn {
  margin: 0 auto;
  border-radius: 20px;
}
</style>
